<template>
  <div>
    <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
      <div id="home">
        <!-- header -->
        <!-- navbar -->
        <nav class="navbar navbar-default navbar-fixed-top">
          <div class="main-nav">
            <div class="container">
              <div class="navbar-header page-scroll">
                <button
                  type="button"
                  class="navbar-toggle"
                  data-toggle="collapse"
                  data-target=".navbar-ex1-collapse"
                >
                  <span class="sr-only">LIINXIN图书网</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <h1>
                  <a class="navbar-brand" href="#/showUbookInfo">LINXIN图书销售平台</a>
                </h1>
              </div>
              <!-- Collect the nav links, forms, and other content for toggling -->
              <div
                class="collapse navbar-collapse navbar-ex1-collapse nav-right"
              >
                <ul class="nav navbar-nav navbar-left cl-effect-15">
                  <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                  <!-- <li class="hidden">
                    <a class="page-scroll" href="#page-top"></a>
                  </li> -->

                  <li class="dropdown">
                    <a
                      href="#/showUbookInfo"
                      class="dropdown-toggle effect-3"
                      data-toggle="dropdown"
                      >全部商品
                    </a>
                  </li>
                  <li v-if="!show">
                    <a href="#/showCollectList">我的收藏</a>
                  </li>
                  <li v-if="!show">
                    <a href="#/showOrderList">我的订单</a>
                  </li>
                  <li v-if="show">
                    <a href="#/login" title="登录 & 注册">
                      <span
                        class="fa fa-user nav-icon"
                        aria-hidden="true"
                      ></span>
                    </a>
                  </li>
                  <li v-if="!show">
                    <el-menu
                      :default-active="activeIndex"
                      class="el-menu-demo"
                      background-color="rgba(52,198,99,0)"
                      text-color="white"
                      mode="horizontal"
                      style="border: none; margin-top: -5px;"
                    >
                      <el-submenu index="1"  style="border: none;">
                        <template slot="title">{{loginUser.userName}}</template>
                        <el-menu-item style="border: none; margin-top: 5px;" @click="showSingleInfo" index="1-1"
                          >个人信息</el-menu-item
                        >
                        <el-menu-item style="border: none;" @click="showUserAddress" index="1-2"
                          >地址管理</el-menu-item
                        >
                        <el-menu-item style="border: none;" @click="showRefundOrder" index="1-3"
                          >售后/退款</el-menu-item
                        >
                        <el-menu-item style="border: none;" @click="goOut" index="1-4"
                          >退出登录</el-menu-item
                        >
                      </el-submenu>
                    </el-menu>
                  </li>
                </ul>
                <!-- shopping cart -->
                <div class="cart-mainf">
                  <div class="chrcart chrcart2 cart cart box_1">
                    <form class="last">
                      <input type="hidden" name="cmd" value="_cart" />
                      <input type="hidden" name="display" value="1" />
                      <button
                        class="top_chr_cart"
                        type="button"
                        name="button"
                        value=""
                        @click="showShoppingCar"
                      >
                        <i class="fa fa-cart-arrow-down" aria-hidden="true"></i>
                      </button>
                    </form>
                  </div>
                </div>
              </div>
              <div class="clearfix"></div>
            </div>
          </div>
        </nav>
        <div class="banner-bg-inner">
          <div class="banner-text-inner">
            <div class="container">
              <h2 class="title-inner">
                网上图书销售系统
              </h2>
            </div>
          </div>
        </div>
        <div class="innerf-pages section">
          <router-view />
        </div>
        <!--// Shop -->

        <!-- footer -->
        <div class="footer-bottom section">
          <div class="container">
            <!-- newsletter -->
            <div class="subscribe-main section-w3layouts text-center">
              <h4 class="rad-txt">
                <span class="abtxt1">保持阅读</span>
                <span class="abtext">改变</span>
              </h4>
            </div>
          </div>
        </div>
        <div class="cpy-right">
          <p></p>
        </div>
      </div>
      <!-- //home -->
    </body>
  </div>
</template>

<script>

export default {
  name: "UserIndex",
  data() {
    return {
      userName: "xxx",
      loginUser: {},
      show: false
    };
  },
  methods: {
    showShoppingCar() {
      if (localStorage.getItem("token") == null) {
        alert("请先登录");
        return;
      }
      this.$router.push("/showShoppingCar");
    },
    goOut() {
      //退出登录（注销）
      //清空浏览器运行内存中的数据
      this.$router.push("/login");
      localStorage.removeItem("token");
      sessionStorage.removeItem("userId");
      sessionStorage.removeItem("loginUser");
      sessionStorage.removeItem("singleBookId");
    },
    showSingleInfo(){
      this.$router.push("/singleInfo");
    },
    showUserAddress(){
      this.$router.push("/showUserAddress");
    },
    showRefundOrder(){
      this.$router.push("/showUserOrderRefund");
    }
  },
  created() {
    if(sessionStorage.getItem("loginUser")!=null){
      this.loginUser = JSON.parse(sessionStorage.getItem("loginUser"));
      this.userName = this.loginUser.userName;
    }

  },
  mounted() {
    if (localStorage.getItem("token") != null) {
      this.show = false;
    } else {
      this.show = true;
    }
  }
};
</script>

<style scoped>
@import "../../assets/login/css/bootstrap.css";
@import "../../assets/login/css/shop.css";
@import "../../assets/login/css/checkout.css";
@import "../../assets/login/css/jquery-ui1.css";
@import "../../assets/login/css/style.css";
@import "../../assets/login/css/font-awesome.css";
/*主菜单样式*/
.el-menu:hover {
	color:rgba(52, 198, 99, 1)!important;
	background: rgba(52, 198, 99, 1)!important;
}

/*主菜单悬浮样式*/
.el-submenu__title:hover {
	color:white!important;
	background: #1890FF!important;
}

/*子菜单样式*/
.el-menu-item{
	background: rgba(52, 198, 99, 0.5)!important;
}
/*子菜单悬浮样式*/
.el-menu-item:hover {
	color:white!important;
	background: rgba(52, 198, 99, 1)!important;
}



</style>

<style></style>
